<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Chat Client</title>
<style type="text/css">
*{padding:0px;margin:0px}
body,html,input{font:12px 宋体,Verdana,Arial,Tahoma;}
ul,ol,li{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
em{font-style:normal;}
body{background:#000 url('http://vr3.6rooms.com/imges/room/skin_bg/mod90_v1.jpg');}
.clear{clear:both}
.box{margin:50px auto;width:800px;height:550px;opacity: 0.9}
.right{position: relative;height:550px;}
.menu{height:35px;}
.menu a{float:left;width:99px;height:35px;background:#79797A;color:#FFF;text-align:center;line-height:35px;margin-right:1px}
.menu a.on{background:#e8e8e8;font-weight:bold;color:#333}
.table{height:515px;background:#e8e8e8;}
.loginbg{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 99998;background-color: #000;opacity: 0.75;filter: alpha(opacity=75);}
.login{z-index:99999;width:400px;height:100px;background:#FFF;position:fixed;top:50%;left:50%;margin: -200px 0 0 -200px;}
.login .text{height:20px;width:330px;margin:30px;border:1px solid #CCC;outline:none;padding:5px;}
.btn{cursor:pointer;background:#CC0000;position:absolute;transition: background-color 0.3s;width:40px;height:40px;border-radius:20px;
	line-height:40px;text-align:center;color:#FFF}
.btn:hover{opacity: 0.6}
.follow{left:690px;top:440px;background:#10A69B}
.rise{left:750px;top:440px;background:#3AB94E}
.look{left:690px;top:500px;background:#FE883A}
.compare{left:750px;top:500px;background:#32C0EE}
.discard{left:720px;top:470px;}
.cardbox1{width:270px;height:170px;position:absolute;background:#;left:265px;top:35px;}
.cardbox2{width:270px;height:170px;position:absolute;background:#;left:0px;top:208px;}
.cardbox3{width:270px;height:170px;position:absolute;background:#;left:530px;top:208px;}
.cardbox4{width:270px;height:170px;position:absolute;background:#;left:265px;top:380px;}
.card{margin-top:10px;width:70px;height:90px;border-radius:5px;background:#FE883A;border:1px solid #eee;color:#FFF;text-align:center;
	line-height:90px;font-size:60px;font-weight:bold;float:left}
.card em{width:30px;height:30px;float:left;font-size:25px;font-weight:normal;line-height:30px;}
.card span{clear:left;float:left;width:100%;text-align:center;margin-top:-30px;}
.card em.spade{color:#000}
.card em.heart{color:#FF0000}
.card em.club{color:#000}
.card em.diamond{color:#FF0000}
.m1{margin-left:40px;}
.m2{margin-left:-10px;}
.title{line-height:40px;line-height:40px;font-weight:bold;font-size:25px;text-align:center;color:#f09}
.money{font-size:16px;text-align:center;font-size:16px;font-weight:bold;color:#CC0000}
.total{position:absolute;background:#;width:350px;height:200px;left:225px;top:200px;line-height:200px;
	text-align:center;font-size:100px;font-weight:bold;color:#32C0EE}
.msgbox{width:250px;height:160px;position:absolute;left:0;bottom:0}
.msgbox ul{padding:10px}
.msgbox ul li{line-height:25px;}
.msgbox ul li span{color:#CCC}
.msgbox ul li em{color:#f09}
</style>
</head>
<body>
<div class="loginbg" style="display:none"></div>
<div class="login" style="display:none">
	<input type="text" id="nickname" maxlength="12" placeholder="请填写昵称,按回车确认" class="text" />
</div>
<div class="box">
	<div class="right">
		<div class="btn follow">跟注</div>
		<div class="btn rise">加注</div>
		<div class="btn look">看牌</div>
		<div class="btn compare">比牌</div>
		<div class="btn discard">放弃</div>
		<div class="menu">
			<a data-id="1" href="#" class="on">1号桌</a>
			<a data-id="2" href="#">2号桌</a>
			<a data-id="3" href="#">3号桌</a>
			<a data-id="4" href="#">4号桌</a>
			<a data-id="5" href="#">5号桌</a>
			<a data-id="6" href="#">6号桌</a>
			<a data-id="7" href="#">7号桌</a>
			<a data-id="8" href="#">8号桌</a>
		</div>
		<div class="clear"></div>
		<div class="table" id="table-1">
			<div class="total">123</div>
			<div class="msgbox">
				<ul>
					<li><em>a</em>:  test</li>
					<li><em>a</em>:  test</li>
					<li><em>a</em>:  test</li>
					<li><em>a</em>:  test</li>
					<li><em>a</em>:  test</li>
				</ul>
			</div>
			<div class="cardbox1">
				<div class="title">12312312</div>
				<div class="money">￥123</div>
				<div class="clear"></div>
				<div class="card m1"><em class="spade">♠</em><span>9</span></div>
				<div class="card m2"><em class="diamond">♦</em><span>10</span></div>
				<div class="card m2"><em class="club">♣</em><span>J</span></div>
			</div>
			<div class="cardbox2">
				<div class="card m1"><em class="spade">♠</em><span>9</span></div>
				<div class="card m2"><em class="diamond">♦</em><span>10</span></div>
				<div class="card m2"><em class="club">♣</em><span>J</span></div>
				<div class="clear"></div>
				<div class="title">12312312</div>
				<div class="money">￥123</div>
			</div>
			<div class="cardbox3">
				<div class="card m1"><em class="spade">♠</em><span>9</span></div>
				<div class="card m2"><em class="diamond">♦</em><span>10</span></div>
				<div class="card m2"><em class="club">♣</em><span>J</span></div>
				<div class="clear"></div>
				<div class="title">12312312</div>
				<div class="money">￥123</div>
			</div>
			<div class="cardbox4">
				<div class="card m1"><em class="spade">♠</em><span>9</span></div>
				<div class="card m2"><em class="diamond">♦</em><span>10</span></div>
				<div class="card m2"><em class="club">♣</em><span>J</span></div>
				<div class="clear"></div>
				<div class="title">12312312</div>
				<div class="money">￥123</div>
			</div>
		</div>
		<div class="table" id="table-2" style="display:none"></div>
		<div class="table" id="table-3" style="display:none"></div>
		<div class="table" id="table-4" style="display:none"></div>
		<div class="table" id="table-5" style="display:none"></div>
		<div class="table" id="table-6" style="display:none"></div>
		<div class="table" id="table-7" style="display:none"></div>
		<div class="table" id="table-8" style="display:none"></div>
	</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script language="javascript">
var client = null;
var table = 1;
$(function(){
	$('#nickname').keydown(function(e){
		if(e.keyCode == 13){
			var name = $(this).val();
			if(name == ""){
				alert("昵称不能为空");
				return false;
			}
			
			login(name);
		}
	});
	
	$('#send').click(function(){
		doSend();
	});
	
	$('#input').keydown(function(e){
		if(e.keyCode == 13){
			doSend();
		}
	});
	
	$('.menu a').click(function(){
		table = parseInt($(this).attr('data-id'));
		$('.menu a').removeClass('on');
		$(this).addClass('on');
		$('.table').hide();
		$('#table-' + table).show();
		return false;
	});
	
	function doSend()
	{
		var v = $('#input').val();
		if(v == ''){
			alert('内容不能为空');
			return false;
		}
		sendMsg({
			type: 'msg',
			text: v,
			channel: channel,
		});
		$('#input').val('');
	}
});

function login(name)
{
	client = new WebSocket('ws://182.254.135.131:9003');
	client.onopen = function(event) {
		console.log("connected");
		sendMsg({
			type: 'login',
			name: name
		});
		$('.loginbg').hide();
		$('.login').hide();
	};
	
	client.onmessage = function(event) { 
		console.log('msg:',event);
		var data = event.data;
		var msg = data ? JSON.parse(data) : {};
		if(msg.type == "msg"){
			var en = '#msg-' + msg.channel;
			var obj = $(en + ' ul');
			obj.append('<li><em>'+msg.name+'</em><span>('+msg.time+')</span>: '+msg.text+'</li>');
			$(en).scrollTop($(en)[0].scrollHeight);
		}else if(msg.type == "login"){
			var obj = $('#msg-0 ul');
			$('.list ul').append('<li id="list-' + msg.id + '">' + msg.name + '</li>');
			obj.append('<li><em>'+msg.name+'</em> 进入了房间</li>');
			$('#msg-0').scrollTop($('#msg-0')[0].scrollHeight);
		}else if(msg.type == 'list'){
			for(var x in msg.list){
				var u = msg.list[x];
				$('.list ul').append('<li id="list-' + u.id + '">' + u.name + '</li>');
			}
		}else if(msg.type == "close"){
			var obj = $('#msg-0 ul');
			$('#list-'+msg.id).remove();
			obj.append('<li><em>'+msg.name+'</em> 离开了房间</li>');
			$('#msg-0').scrollTop($('#msg-0')[0].scrollHeight);
		}
	};
	
	client.onclose = function(event) { 
		console.log('close:',event); 
	};
	
	client.onerror = function(event) { 
		console.log('error:',event); 
	};
}

function sendMsg(data)
{
	console.log(data);
	client.send(JSON.stringify(data));
}
</script>
</body>
</html>